<template>
    <section>
        <el-upload ref="uploadRef" :file-list="props.modelValue" multiple list-type="picture-card"
            :http-request="submitUpload">
            <el-icon>
                <i-ep-Plus />
            </el-icon>
            <template #file="{ file }">
                <div class=" flex-1">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <el-icon><i-ep-zoom-in /></el-icon>
                        </span>
                        <!-- <span v-if="!state.disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                            <el-icon>
                                <i-ep-Download />
                            </el-icon>
                        </span> -->
                        <span v-if="!state.disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <el-icon><i-ep-Delete /></el-icon>
                        </span>
                    </span>
                </div>
            </template>
        </el-upload>

        <el-dialog v-model="state.dialogVisible">
            <div class="flex justify-center">
                <img w-full :src="state.dialogImageUrl" alt="Preview Image" />
            </div>
        </el-dialog>
    </section>
</template>

<script lang='ts' setup>
import { UploadFile, UploadRequestOptions } from 'element-plus';

type Props = {
    modelValue: { name: string, url: string }[],
}
type State = {
    images: { name: string, url: string, hash: string }[],
    disabled: boolean;
    dialogImageUrl: string;
    dialogVisible: boolean;
}

const props = withDefaults(defineProps<Props>(), {});
const emit = defineEmits([
    "update:modelValue",
]);
const state = reactive<State>({
    images: [],
    disabled: false,
    dialogImageUrl: '',
    dialogVisible: false,
})

const uploadRef = ref()

const submitUpload = async (fileObj: UploadRequestOptions) => {
    Utils.Modal().loading('上传中~')
    const file = fileObj.file;

    const [compressErr, compress] = await Utils.ImageCompressToRatio(file, 0.6)
    if (compressErr) return

    const [base64Err, base64] = await Utils.FileToBase64(compress)
    if (base64Err) return Utils.Modal().alert('图片解析错误~')

    const str = base64.split('base64,')[1]
    const [err, res] = await CommonService.uploadImage({ base64: str })
    Utils.Modal().closeLoading()
    if (err) return Utils.Modal().msgError(err)

    const image = res?.data || {}
    const { path: name, url, hash } = image
    const { images: temp } = state
    temp.push({ name, url, hash })
    emit("update:modelValue", [...temp])
}

const handlePictureCardPreview = (file: UploadFile) => {
    state.dialogImageUrl = file.url!
    state.dialogVisible = true
}

const handleDownload = (file: UploadFile) => {
    Utils.downLoadImage(file as any)
}

const handleRemove = async (file: { hash: string } & UploadFile) => {
    Utils.Modal().loading('删除中~')
    const [err, res] = await CommonService.deleteImage({ hash: file.hash })
    Utils.Modal().closeLoading()
    // if (err) return Utils.Modal().msgError(err)
    if (err) console.log('CommonService.deleteImage :>> ', err)
    const { images } = state
    const temp = images.filter(_ => _.name !== file.name)
    state.images = temp
}

const resetImage = () => {
    state.images = []
}

defineExpose({
    resetImage,
})
</script>

<style lang='scss' scoped></style>